<!--
 * @Desc: 报修表单页面
 * @version: v1.00
 * @Author: harry
 * @Date: 2023-8-10 21:45:31
 * @LastEditors: harry
 * @LastEditTime: 2024-04-07 20:57:16
-->
<template>
  <div class="repair">
    <div class="repair-top">
      <div class="describe">
        <div class="desc">
          <span class="word">报修描述</span>
          <span class="tip">*</span>
        </div>
        <van-cell-group>
          <van-field
            v-model="rec.repairDesc"
            rows="2"
            autosize
            label=""
            type="textarea"
            maxlength="256"
            placeholder="请描述设备损坏情况，如：故障现象、外观状况等"
            show-word-limit
          />
        </van-cell-group>
      </div>
      <Upload ref="uploadRef" />
      <div class="repair-item">
        <div class="desc">
          <span class="word">报修类型</span>
          <span class="tip">*</span>
        </div>
        <div
          class="right"
          @click="popRef.togglePop(rec.typesList, '报修类型', 1)"
        >
          <span v-if="!rec.typeName">请选择报修类型</span>
          <span v-else style="color: #303233">{{ rec.typeName }}</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="repair-item">
        <div class="desc">
          <span class="word">所在建筑</span>
          <span class="tip">*</span>
        </div>
        <div
          class="right"
          @click="popRef.togglePop(rec.buildList, '所在建筑', 2)"
        >
          <span v-if="!rec.buildName">请选择所在建筑</span>
          <span v-else style="color: #303233">{{ rec.buildName }}</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="repair-item">
        <div class="desc">
          <span class="word">所在房间</span>
        </div>
        <div class="right" @click="openRoom">
          <span v-if="!rec.roomName">请选择所在房间</span>
          <span v-else style="color: #303233">{{ rec.roomName }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <div class="btn">
      <van-button type="primary" block @click="submitData">提交</van-button>
    </div>

    <PopUp ref="popRef" @getPopParams="getPopParams" />
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import PopUp from "./components/popup.vue";
import debounce from "lodash/throttle";
import { Toast } from "vant";
import LocalCache from "@/utils/cache";
import { getTypes, getPlaceTree, addRepairs } from "@/service/modules/repair";
import Upload from "@/components/upload";
import router from "@/router";
document.title = "报修填报";
const { name, personId, mobile } = LocalCache.getSession("userInfo");
const popRef = ref();
const uploadRef = ref();
const rec = reactive({
  typesList: [],
  buildList: [],
  typeName: "",
  buildName: "",
  roomName: "",
  repairDesc: "",
});

// 获取报修类型数据
getTypesFn();
async function getTypesFn() {
  const { code, rows } = await getTypes(1);
  if (code === 0) {
    rec.typesList = rows;
  }
}

// 获取楼栋
getPlaceTreeFn();
async function getPlaceTreeFn() {
  const {
    code,
    data: { children },
  } = await getPlaceTree();
  if (code === 0) {
    let arry = [];
    children.forEach((i) => {
      i.children.forEach((k) => {
        arry.push(k);
      });
    });
    rec.buildList = arry;
  }
}

// 选择房间
const openRoom = () => {
  if (!popRef.value.rec.buildingLocation) {
    Toast({
      message: "请先选择所在建筑",
      duration: 1500,
    });
    return false;
  }
  popRef.value.togglePop([], "所在房间", 3);
};

// 点击弹框内容回传
const getPopParams = (name, type) => {
  switch (type) {
    case 1:
      rec.typeName = name;
      break;
    case 2:
      rec.buildName = name;
      rec.roomName = "";
      break;
    case 3:
      rec.roomName = name;
      break;
  }
  popRef.value.togglePop();
};
// 提交数据
const submitData = debounce(async () => {
  // const repairType = popRef.value.rec.repairType;
  const repairType = rec.typeName;
  const buildingLocation = popRef.value.rec.buildingLocation;
  const roomLocation = popRef.value.rec.roomLocation;
  if (!rec.repairDesc) {
    Toast.fail("请填写报修描述");
    return false;
  }
  if (!repairType) {
    Toast.fail("请选择报修类型");
    return false;
  }
  if (!buildingLocation) {
    Toast.fail("请选择所在建筑");
    return false;
  }
  const res = await addRepairs({
    files: uploadRef.value.rec.fileVos.map((i) => {
      return {
        fileType: i.fileType,
        fileUrl: i.url,
      };
    }),
    repairDesc: rec.repairDesc,
    repairType,
    roomLocation,
    buildingLocation,
    roomLocationName: rec.roomName,
    buildingLocationName: rec.buildName,
    personId,
    name,
    personMobile: mobile,
  });
  if (res.code === 0) {
    Toast.success("提交成功");
    setTimeout(() => {
      router.replace("/home");
    }, 1500);
  }
}, 10000);
</script>
<style lang="less" scoped>
.repair {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  &-top {
    flex: 1;
  }
  .tip {
    color: red;
  }
  .desc {
    display: flex;
    align-items: center;
  }
  .word {
    font-size: 14px;
    line-height: 50px;
    color: #303233;
  }
  /deep/ .van-cell-group {
    border: 1px dotted #e1e5ea;
    border-radius: 4px;
    .van-field {
      height: 144px;
      padding: 8px 12px;
      padding-bottom: 12px;
      textarea {
        height: 102px !important;
      }
      textarea::placeholder {
        font-size: 14px;
        line-height: 22px;
        color: #c2c6cc;
        letter-spacing: 1px;
      }
      .van-field__word-limit {
        font-size: 14px;
        line-height: 22px;
        color: #c5c5c5;
      }
    }
  }
  [class*="van-hairline"]:after {
    border: none;
  }
  &-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
    .right {
      font-size: 14px;
      line-height: 40px;
      color: #c5c5c5;
      span {
        margin-right: 8.75px;
      }
    }
  }
  .btn {
    padding: 0 12px;
    margin-bottom: 30px;
    button {
      background: #3e77fa;
      border-radius: 40px;
      .van-button__text {
        font-size: 16px;
        line-height: 19px;
        color: #fff;
      }
    }
  }
}
</style>
